import CodeBlock from "../../../component/CodeBlock";

function Zustand() {
    const basicStoreExample = `import { create } from 'zustand'

// 创建一个简单的 store
const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}))

// 在组件中使用
function Counter() {
  const { count, increase, decrease, reset } = useStore()
  
  return (
    <div>
      <span>{count}</span>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}`;

    const asyncExample = `import { create } from 'zustand'

// 异步操作示例
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  // 异步获取数据
  fetchBears: async () => {
    const response = await fetch('/api/bears')
    const bears = await response.json()
    set({ bears })
  },
}))`;

    const sliceExample = `import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

// 使用中间件
const useBearStore = create(
  devtools(
    persist(
      (set, get) => ({
        bears: 0,
        addABear: () => set((state) => ({ bears: state.bears + 1 })),
        removeABear: () => set((state) => ({ bears: state.bears - 1 })),
        getBears: () => get().bears, // 获取状态而不订阅
      }),
      {
        name: 'bear-storage', // 持久化存储的key
      }
    )
  )
)`;

    return (
        <div style={{ 
            maxWidth: '900px', 
            margin: '0 auto', 
            padding: '20px',
            fontFamily: 'Arial, sans-serif'
        }}>
            <h1 style={{ 
                color: '#2c3e50',
                textAlign: 'center',
                marginBottom: '20px',
                fontSize: '2.5rem'
            }}>Zustand 状态管理</h1>
            
            <p style={{ 
                lineHeight: '1.6',
                color: '#34495e',
                fontSize: '1.1rem',
                marginBottom: '20px'
            }}>
                Zustand 是一个轻量级、易于使用的 React 状态管理库。它提供了简单的 API，
                不需要太多样板代码，同时具有良好的 TypeScript 支持和中间件系统。
            </p>
            
            <div style={{ 
                backgroundColor: '#e3f2fd',
                borderLeft: '4px solid #2196f3',
                padding: '15px',
                marginBottom: '25px',
                borderRadius: '4px'
            }}>
                <h3 style={{ 
                    color: '#0d47a1',
                    marginTop: 0
                }}>为什么选择 Zustand？</h3>
                <ul style={{ 
                    lineHeight: '1.8',
                    color: '#34495e',
                    marginBottom: 0
                }}>
                    <li>🔑 简单易用 - 几乎零配置</li>
                    <li>📦 轻量级 - 包体积小</li>
                    <li>⚡ 高性能 - 细粒度更新</li>
                    <li>🔧 灵活 - 支持中间件和插件</li>
                    <li>typescript Typescript 支持 - 完善的类型推导</li>
                </ul>
            </div>

            <h2 style={{ 
                color: '#2c3e50',
                borderBottom: '2px solid #3498db',
                paddingBottom: '8px',
                marginBottom: '16px'
            }}>基础用法</h2>
            
            <p style={{ 
                lineHeight: '1.6',
                color: '#34495e'
            }}>
                使用 create 函数创建一个 store，可以在任何地方使用这个 store，
                组件会自动订阅相关状态的变化。
            </p>
            
            <div style={{ marginBottom: '24px' }}>
                <CodeBlock code={basicStoreExample} />
            </div>

            <h2 style={{ 
                color: '#2c3e50',
                borderBottom: '2px solid #3498db',
                paddingBottom: '8px',
                marginBottom: '16px'
            }}>异步操作</h2>
            
            <p style={{ 
                lineHeight: '1.6',
                color: '#34495e'
            }}>
                Zustand 天然支持异步操作，可以在 actions 中处理异步逻辑，
                并在完成后更新状态。
            </p>
            
            <div style={{ marginBottom: '24px' }}>
                <CodeBlock code={asyncExample} />
            </div>

            <h2 style={{ 
                color: '#2c3e50',
                borderBottom: '2px solid #3498db',
                paddingBottom: '8px',
                marginBottom: '16px'
            }}>中间件支持</h2>
            
            <p style={{ 
                lineHeight: '1.6',
                color: '#34495e'
            }}>
                Zustand 提供了丰富的中间件生态系统，可以轻松添加持久化、
                开发工具等功能。
            </p>
            
            <div style={{ marginBottom: '24px' }}>
                <CodeBlock code={sliceExample} />
            </div>

            <div style={{ 
                backgroundColor: '#fff3e0',
                borderLeft: '4px solid #ff9800',
                padding: '15px',
                borderRadius: '4px'
            }}>
                <h3 style={{ 
                    color: '#e65100',
                    marginTop: 0
                }}>安装 Zustand</h3>
                <CodeBlock code="npm install zustand" />
                <p style={{ 
                    marginTop: '10px',
                    marginBottom: '0',
                    color: '#34495e'
                }}>
                    或使用 yarn: <CodeBlock code="yarn add zustand" />
                </p>
            </div>
        </div>
    );
}

export default Zustand;